<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="fixed">
        <div class="bg">
            <video src="large.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
        </div>
    </div>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #F5F5F7;
        padding-bottom: 3000px;
    }

    .fixed {
        position: fixed;
        top: 250px;
    }

    .bg {
        width: 822px;
        height: 406px;
        background: url('high_definition.jpg') no-repeat 0/cover;
        position: relative;
        /* transform: matrix(1.19785, 0, 0, 1.19785, 0, 0); */
    }

    video {
        width: 620px;
        height: 351px;
        position: absolute;
        left: 97px;
        top: 29px;
    }
</style>
<script>
    let i = 1
    let j = 1
    window.onscroll = () => {
        if (j > 0) {
            j = j - 0.01
            document.querySelector('.bg').style.opacity = `${j}`
        }
        if (i < 3.6) {
            i = i + 0.1
            document.querySelector('.bg').style.transform = `matrix(${i}, 0, 0, ${i}, 0, 0)`
        }
        // if (document.documentElement.scrollTop % 5 == 0 && i < 3.6) {
        //     i = i + 0.1
        //     document.querySelector('.bg').style.cssText = ` transform: matrix(${i}, 0, 0, ${i}, 0, 0);`
        // }
        // if (i > 3.6) {
        //     i = 3.6
        //     j = j - 0.1
        //     if (j < 0) {
        //         j = 0
        //     }
        //     setTimeout(() => {
        //         document.querySelector('.bg').style.cssText = `opacity:${j}`
        //     }, 100);
        //     console.log(document.querySelector('.bg').style.cssText);
        // }
    }
</script>

</html>